<template>
    <div class="pie_bar" v-if="!isHalf">
        <div class="empty_pie" v-if="type=='solid' && isEmpty==true ">0%</div>
        <!-- <div class="empty_pie hollow" v-if="type=='hollow' && isEmpty==true">0人选择</div> -->
         <div class="empty_pie hollow" v-if="type=='hollow' && isEmpty==true">0人填报</div>
        <div class="pie" :id="currIdName" v-show="isEmpty==false"></div>
        <div class="tips clearfix" style="display: none">
            <div class="item fl" v-for='item in formatData' :key="item.color">
                <span class="opt_cricle" :style="'background:'+item.color"></span>
                <span class="opt_lable">{{item.option}}</span>
                <span class="opt_val">{{item.value}}人</span>
            </div>
        </div>
    </div>
    <div class="margin15" v-else>
        <div class="circle_info">
        <canvas style="transform: translateY(0);" id="canvas" width="700" height="700"></canvas>
        <div class="nums" style="transform:scale(2,2)">
            <div class="t">
            <div class="y"></div>{{this.dataList[0].name}}{{this.dataList[0].value}}人
            </div>
            <div class="t">
            <div class="x"></div>{{this.dataList[1].name}}{{this.dataList[1].value}}人
            </div>
        </div>
        </div>
    </div>
</template>

<script>
import { Circle, Ring } from "../../static/js/arc";
import empty_bg from '@/assets/img/empty_bg.svg'
import { COLORLIST }  from './colorList'

export default {
    name: "Pie",
    components: {  },
    props: {
        //是否半圆
        isHalf:{
            type: Boolean,
            default: false,
        },
        // 全空数据
        isEmpty: {
            type: Boolean,
            default: false,
        },
        // 当前 dom class名
        currIdName:{
            type: String,
            default: '',
        },
        type: {
            type: String,
            default: 'solid', // hollow-空心 solid-实心
        },
        // 统计数据总数
        total:{
            type: Number,
            default: 50,
        },
        // 饼图数据
        dataList:{
            type: Array,
            default:function () {
                return []
            }
        }
    },
    data() {
        return {
            empty_bg
        };
    },
    computed: {
        formatData(){
            let arr=[]
            this.dataList.map((i,id)=>{
                arr.push({
                    value:i.value,
                    name: `${i.name+'\n'+(( i.value/this.total)*100).toFixed(0)}%`,
                    option: i.option,
                    color: COLORLIST[id]
                })
            })
            return arr
        },
    },
    mounted(){
        if(this.formatData.filter(i=>{return i.value}).length!=0)
        if(!this.isHalf){
            this.init(this.formatData)
        }else{
            this.showChart(this.dataList[0].value,this.dataList[1].value)
        }

    },
    methods: {
        // 半圆
        showChart(x, y) {
            var canvas = document.getElementById("canvas");
            canvas.setAttribute("width", "350px");
            canvas.setAttribute("height", "200px");
            var ctx = canvas.getContext("2d");
            var ring = new Ring("160", "22", "#fff", ["#498FE2", "#FE877F"], "round");
            let realX = x/(x+y) * 50
            let readlY = y/(x+y) * 50
            ring.drawRing(ctx, 1 * Math.PI, 0 * Math.PI, [realX, readlY], 175, 175);
        },
        init(_data){

            echarts.init(document.getElementById(this.currIdName)).setOption({
                series : [
                    {
                        center: ['50%', '58%'],
                        radius: this.type=='solid'? '67%': ['40%', '60%'],
                        type: 'pie',
                        data: _data,
                        // 每项item配置
                        itemStyle: {
                            normal:{
                                borderWidth: 1, // 间距
                                borderColor: '#fff', // 间距背景色
                                color:function(params) {
                                  console.log(params)
                                    return COLORLIST[params.dataIndex]
                                }
                            }
                        }
                    }
                ]
            })

        },
    }
};
</script>

<style lang='less' scoped>
.pie_bar{
    .empty_pie{
        width:179px;
        height:179px;
        text-align: center;
        line-height: 179px;
        border-radius:50%;
        font-size:16px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(158,165,181,1);
        background:rgba(235,241,249,1);
        margin: 30px auto 20px auto;
    }
    .hollow{
        width:179px;
        height:179px;
        text-align: center;
        line-height: 179px;
        background: url('../assets/img/empty_bg.svg');
        margin: 30px auto 20px auto;
    }
    .pie{
        width: 100%;
        height: 200px;
    }
    .tips{
        width: 92%;
        box-sizing: border-box;
        padding: 0 15px;
        margin: 0 auto;
        margin-top: 25px;
        .item{
            font-size: 14px;
            font-family: PingFangSC-Regular,PingFang SC;
            font-weight:400;
            margin-right: 15px;
            .opt_cricle{
                width:8px;
                height:8px;
                display: inline-block;
                border-radius: 50%;
                margin-right: 4px;
            }
            .opt_lable{
                color:rgba(85,85,85,1);
                margin-right: 5px;
            }
            .opt_val{
                color:rgba(178,178,178,1);
            }
        }
    }
}
.circle_info{
  width: 100%;
  height: 100px;
  position:relative;
  transform:scale(0.5,0.5);
  display:flex;
  justify-content:center;
  align-items:center;

}
.statsTit {
  display: flex;
  align-items: center;
}
.statsArc {
  padding: 22px 15px;
  border-top: 10px solid rgb(239, 239, 239);
  border-bottom: 15px solid rgb(239, 239, 239);
}
.x {
  background: #fe877f;
}

.y {
  background: #498fe2;
}
.t {
  font-size: 14px;
  color: #919191;
  display: inline-flex;
  align-items: center;
}
.nums {
  width: 100px;
  position: absolute;
  bottom: -12px;
  left: 55%;
  margin-left: -50px;
  text-align: left;
}
.x,
.y {
  width: 9px;
  height: 9px;
  display: block;
  border-radius: 50%;
  margin-right: 5px;
}
</style>
